<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登陆页面- 跑步打卡监控平台</title>
    <!-- base:css -->
    <link rel="stylesheet" href="/vendors/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="/vendors/css/vendor.bundle.base.css">
    <!-- endinject -->
    <!-- inject:css -->
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="stylesheet" href="/izitoast/iziToast.min.css" />
<!--    <link rel="stylesheet" href="/css/site.css" />-->
</head>
<body>
<div class="container-scroller d-flex">
    <div class="container-fluid page-body-wrapper full-page-wrapper d-flex">
        <div class="content-wrapper d-flex align-items-center auth px-0">
            <div class="row w-100 mx-0">
                <div class="col-lg-4 mx-auto">
                    <div class="auth-form-light text-left py-5 px-4 px-sm-5" id="app">
                        <div class="brand-logo">
                            <img src="../../images/logo.svg" alt="logo">
                        </div>
                        <h4>你好!欢迎登录系统</h4>
                        <h6 class="font-weight-light">登录系统.</h6>
                        <form class="pt-3">
                            <div class="form-group">
                                <input type="text" class="form-control form-control-lg"
                                       id="inputuserName" v-model="loginDto.userName" placeholder="用户名">
                            </div>
                            <div class="form-group">
                                <input type="password" class="form-control form-control-lg"
                                       id="inputPassword" v-model="loginDto.password" placeholder="密码">
                            </div>
                            <div class="mt-3">
                                <button id="loginButton" type="button" class="btn btn-block btn-primary btn-lg font-weight-medium auth-form-btn"
                                        v-on:click="login" >登录</button>
                            </div>
                            <div class="my-2 d-flex justify-content-between align-items-center">
                                <div class="form-check">
                                    <label class="form-check-label text-muted">
                                        <input type="checkbox" class="form-check-input">
                                        保持登录
                                    </label>
                                </div>
                                <a href="#" class="auth-link text-black">忘记密码?</a>
                            </div>
                            <div class="mb-2">
<!--                                <button type="button" class="btn btn-block btn-facebook auth-form-btn">-->
<!--                                    <i class="mdi mdi-facebook mr-2"></i>Connect using facebook-->
<!--                                </button>-->
                            </div>
                            <div class="text-center mt-4 font-weight-light">
                                没有账户嘛? <a href="/auth/join" class="text-primary">点击注册</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- content-wrapper ends -->
    </div>
    <!-- page-body-wrapper ends -->
</div>
<input type="hidden"  id="isLogout" th:value="${isLogout}" />
<script src="/js/vue.js"></script>
<!--<script src="/js/vue.min.js"></script>-->
<!-- base:js -->
<script src="/vendors/js/vendor.bundle.base.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/izitoast/iziToast.min.js"></script>
<script src="/izitoast/iziToast.init.js"></script>

<!-- endinject -->
<!-- inject:js -->
<script src="/js/off-canvas.js"></script>
<script src="/js/hoverable-collapse.js"></script>
<script src="/js/template.js"></script>
<!-- endinject -->
<script type="text/javascript">
    document.onkeydown=function(){
        if (event.keyCode===13){
            document.getElementById("loginButton").click();
            return false;
        }
    }
    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }
    let isLogout =getQueryVariable("isLogin");
    if (isLogout=="yes"){
        console.log(isLogout);
        successMsg("注销成功");
    }
    let loginVue=  new Vue({
        el:'#app',
        data(){
            return{
                loginDto:{
                    userName:"fanbaos",
                    password:"123456"
                }
            }
        },
        created:function(){
            let that = this;
        },
        methods: {
            login(){
                let that = this;
                console.log("登录中");
                if(that.loginDto.userName.length<6){
                    alert("用户名输入不规范");
                    return;
                }
                if(that.loginDto.password.length<6){
                    alert("密码输入不规范");
                    return;
                }
                console.log(that.loginDto);
                axios.post('/auth/tologin',that.loginDto,{
                    headers:{'Content-Type':'application/json'}
                })
                    .then(function(res){
                        if(res.status==200){
                            welcome("成功","登录成功！",500,function(){
                                window.location.href="/home/index";
                            });
                        }
                        console.log(res);

                    }).catch(function(err){
                    errorMsg("失败","账号或密码有误！")
                });
            }
        },
    });
</script>
</body>
</html>
